<template>
  <div>
    <sb-tip
      >有时候表格的行列都是需要动态增删的，比如电商项目中的添加商品时，编辑商品规格。不同规格对应不同价格，将拼好的结构返回给后端</sb-tip
    >
    <div style="border: 1px solid #ddd; padding: 15px">
      <div style="padding: 10px 0">
        <a-tag
          v-for="(tag, index) in specs"
          :key="tag"
          closable
          @close="() => handleClose(tag)"
        >
          {{ tag }}
        </a-tag>
        <a-input
          v-if="inputVisible"
          ref="input"
          type="text"
          size="small"
          :style="{ width: '78px' }"
          :value="newSpecName"
          @change="handleInputChange"
          @blur="handleInputConfirm"
          @keyup.enter="handleInputConfirm"
        />
        <a-tag
          v-if="!inputVisible && specs.length < 8"
          color="green"
          @click="showInput"
        >
          <a-icon type="plus" /> 新增规格
        </a-tag>
      </div>
      <table ref="specsTable" class="specs-table" v-if="specs.length > 0">
        <tr>
          <th v-for="group in specs">
            {{ group }}
          </th>
          <th>价格</th>
          <th>操作</th>
        </tr>
        <tr v-for="(specGroup, i) in specGroups" :key="specGroup.id">
          <td v-for="group in specs">
            <input type="text" />
          </td>
          <td>
            <input type="text" />
          </td>
          <td>
            <i-delete @click="specGroups.splice(i, 1)" />
          </td>
        </tr>
        <tfoot>
          <tr>
            <td :colspan="specs.length + 2">
              <sb-btn-c @click="addSpecGroups" ghost>添加规格组</sb-btn-c>
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
    <sb-center style="padding: 10px">
      <sb-btn-c size="large" @click="saveGoods" icon="save">
        保存商品
      </sb-btn-c>
    </sb-center>
    <HighLightData label="表格数据" :data="displayData" />
  </div>
</template>
<script>
import { HighLightData } from "~components";

export default {
  data() {
    return {
      newSpecName: "",
      specs: [],
      specGroups: [{ id: +new Date() }],
      inputVisible: false,
      displayData: [],
    };
  },
  methods: {
    saveGoods() {
      let specGroup = [];
      //通过refs获取到表格的DOM对象，然后获取到表格的所有行
      if (!this.$refs.specsTable) return this.$mw("请添加规格");
      let rows = this.$refs.specsTable.rows;
      //遍历每一行，拿到其中的单元格数组
      for (let i = 0; i < rows.length-1; i++) {
        const cells = rows[i].cells;
        let specItem = []; //每一行的值
        //拿到单元格数组后，遍历，并取到单元格中的值
        for (let i = 0; i < cells.length - 1; i++) {
          const cell = cells[i]; //每个单元格
          let input = cell.querySelector("input");
          //TH中是取文字，td中取input的值
          if (input) specItem.push(input.value);
          else specItem.push(cell.innerText);
        }
        specGroup.push(specItem);
      }

      this.displayData = specGroup;
    },
    addSpecGroups() {
      this.specGroups.push({ id: +new Date() });
    },
    handleClose(removedTag) {
      const specs = this.specs.filter((tag) => tag !== removedTag);
      this.specs = specs;
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(function () {
        this.$refs.input.focus();
      });
    },
    handleInputChange(e) {
      this.newSpecName = e.target.value;
    },
    handleInputConfirm() {
      const newSpecName = this.newSpecName;
      let specs = this.specs;
      if (newSpecName && !specs.includes(newSpecName)) {
        specs.push(newSpecName);
      }
      Object.assign(this, {
        specs,
        inputVisible: false,
        newSpecName: "",
      });
    },
  },
  components: { HighLightData },
};
</script>

<style lang="scss">
.specs-table {
  border-collapse: collapse;
  th,
  td {
    width: 120px;
    border: 1px solid #ccc;
    text-align: center;
    padding: 10px 2px;
    input {
      border: none;
      width: 90%;
      outline: none;
    }
  }
}

/* you can make up upload button and sample style by using stylesheets */
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>